<template>
  <div>
    <el-row :gutter="20" >
      <el-col :span="6">
        <div
          class="grid-content bg-purple"
          style="background-color: #2d9bc9;
          display: flex;flex-direction: column;
          height: 180px;
          justify-content:center;
          align-items: center" >
        <div style="color: white;left: 10px"><strong>{{datas.Courses}}</strong></div>
        <div style="color: white">Courses</div>
      </div></el-col>
      <el-col :span="6">
        <div
          class="grid-content bg-purple"
          style="background-color: #7d57c1;
          display: flex;
          flex-direction:column;
          justify-content:center;
          height: 180px;
          align-items: center">
        <div style="color: white;left: 10px"><strong>{{datas.Classes}}</strong></div>
        <div style="color: white">Classes</div>
      </div></el-col>
      <el-col :span="6">
        <div
          class="grid-content bg-purple"
          style="background-color: #26ccca;
          display: flex;
          flex-direction:column;
          justify-content:center;
          height: 180px;
          align-items: center">
          <div style="color: white;left: 10px"><strong>{{datas.Students}}</strong></div>
          <div style="color: white">Students</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div
          class="grid-content bg-purple"
          style="background-color: #2b4049;
          display: flex;
          flex-direction:column;
          justify-content:center;
          height: 180px;
          align-items: center">
        <div style="color: white;left: 10px"><strong>{{datas.Teachers}}</strong></div>
        <div style="color: white">Teachers</div>
      </div></el-col>
    </el-row>
    <el-row style="margin-top: 30px" :gutter="10" >
      <el-col :span="12" >
        <div id="fEcharts" class="grid-content bg-purple" style="width: auto;height:400px;background-color: #fdfdfe"></div>
      </el-col>
      <el-col :span="12">
        <div id="sEcharts" class="grid-content bg-purple-light" style="width: auto;height:400px;background-color: #fdfdfe"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

  export default {
    name: "home",
    data(){
      return{
        datas:{
          Courses:'',
          Students:'',
          Teachers:'',
          Classes:'',
        },
      }
    },
    mounted() {
      this.echartsInit();
      this.getClasser();
      this.getTeachers();
      this.getStudents();
      this.getCourses();
    },
    methods:{
      echartsInit(){
        // 基于准备好的dom，初始化echarts实例
        var myChart1 = this.$echarts.init(document.getElementById('fEcharts'));
        var myChart2 = this.$echarts.init(document.getElementById('sEcharts'));

        // 指定图表的配置项和数据
        var option1 = {
          tooltip: {},
          legend: {
            data: ['数量']
          },
          xAxis: {
            data: ['班级', '课程', '学生', '讲师', '题库', '试卷']
          },
          yAxis: {},
          series: [
            {
              name: '数量',
              type: 'bar',
              data: [2, 3, 4, 5, 6, 7]
            }
          ]
        };
        var option2 = {
          series: [
            {
              type: 'pie',
              data: [
                {
                  value: 300,
                  name: '单选题'
                },
                {
                  value: 350,
                  name: '多选题'
                },
                {
                  value: 400,
                  name: '判断题'
                },
                {
                  value: 450,
                  name: '填空题'
                },
                {
                  value: 500,
                  name: '问答题'
                }
              ],
              roseType: 'area'
            }
          ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1);
        myChart2.setOption(option2);
      },
      async getClasser(){
        let res = await this.$API.getBanji();
        this.datas.Classes = res.data.length;
      },
      async getTeachers(){
        let res = await this.$API.getLaoshi();
        this.datas.Teachers = res.data;
      },
      async getStudents(){
        let res = await this.$API.getXuesheng();
        this.datas.Students = res.data;
      },
      async getCourses(){
        let res = await this.$API.getKecheng();
        this.datas.Courses = res.data.length;
      }
    },
    sEchartsInit(){
    },

  };
</script>

<style scoped>

.grid-content {
  border-radius: 2px;min-height: 80px;
}
</style>